<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../font/iconfont.css">
   <link rel="stylesheet" href="./index.css">
   <title>喜马拉雅</title>
</head>

<body style="overflow-x: hidden;">
   <!-- 头部导航栏 -->
   <header class="header">
      <div class="main-nav">
         <a class="logo-tag" href="https://www.ximalaya.com"></a>
         <nav class="label-nav">
            <a class="nav-a1" href="#">发现</a>
            <a class="nav-a2" href="#">分类</a>
            <a class="nav-a3" href="#">电台</a>
            <div class="sort-nav">
               <a href="#">音乐</a>
               <a href="#">有声书</a>
               <a href="#">娱乐</a>
               <a href="#">外语</a>
               <a href="#">儿童</a>
               <a href="#">商业财经</a>
               <a href="#">历史</a>
               <a href="#">相声评书</a>
               <a href="#">个人成长</a>
               <a href="#">广播剧</a>
               <a href="#">有声图书</a>
               <a href="#">人文国学</a>
               <a href="#">热点</a>
               <a href="#">生活</a>
               <a href="#">悬疑</a>
               <a href="#">健康</a>
               <a href="#">汽车</a>
            </div>
            <div class="label-nav-check"></div>
         </nav>
         <div class="search-box">
            <input type="text" id="search-ipt" placeholder="专辑/声音/主播">
            <button class="search-btn"><i class="iconfont icon-sousuo"></i></button>
            <div class="hot-search">
               <ul>
                  <li class="remen">热门搜索</li>
                  <li class="hot-txt">遮天</li>
                  <li class="hot-txt">相声</li>
                  <li class="hot-txt">孙子兵法与三十六计</li>
                  <li class="hot-txt">成语故事</li>
                  <li class="hot-txt">儿童睡前的故事</li>
               </ul>
            </div>
         </div>
         <nav class="tool-nav">
            <a href="#" class="upload">
               <i class="iconfont icon-shangchuan"></i>
               <p>上传</p>
            </a>
            <div class="upload-more">
               <span class="upload-triangle"></span>
               <div class="upload-more-content">
                  <a href="#" class="a1-item">
                     <i class="iconfont icon-jianji"></i>
                     音频剪辑
                     <img class="backimg1" src="../img/jianji.png" alt="">
                  </a>
                  <a href="#" class="a2-item">
                     <i class="iconfont icon-shangchuan"></i>
                     上传节目
                  </a>
                  <a href="#" class="a3-item">
                     <i class="iconfont icon-diantai"></i>
                     我的节目
                  </a>
                  </a>
                  <a href="#" class="a4-item">
                     <i class="iconfont icon-vip"></i>
                     主播入驻
                  </a>
               </div>
               <div>

               </div>
            </div>
            <a href="#" class="creat">
               <i class="iconfont icon-chuangzuozhongxin"></i>
               <p>创作中心</p>
            </a>
            <a href="#" class="publish">
               <i class="iconfont icon-A"></i>
               <p>有声出版</p>
            </a>
            <a href="#" class="client">
               <i class="iconfont icon-huaban9"></i>
               <p>客户端</p>
            </a>
            <div class="client-more">
               <span class="client-triangle"></span>
               <div class="client-more-content">
                  <div class="phone-client">
                     <span>
                        <i class="iconfont icon-shoujiban"></i>手机版
                     </span>
                     <img src="../img/erweima.png" alt="">
                     <div>扫码下载APP</div>
                  </div>
                  <div class="pc-client">
                     <span>
                        <i class="iconfont icon-PCdiannaoban"></i>电脑版
                     </span>
                     <img src="../img/ting.png" alt="">
                     <div>立即下载 > </div>
                  </div>
                  <p class="more-version">点击查看更多版本 > </p>
               </div>
            </div>
            <a class="user-info">
               <img src="../img/userinfo.png" alt="">
            </a>
            <div class="userinfo-more">
               <span class="userinfo-triangle"></span>
               <div class="login-up">
                  <p>未登录</p>
               </div>
               <div class="login-quick">快速登录</div>
               <div class="login-down">
                  <a href="">
                     <i class="iconfont icon-huaban9"></i>
                     <p>账号</p>
                  </a>
                  <a href="">
                     <i class="iconfont icon-erweima"></i>
                     <p>二维码</p>
                  </a>
                  <a href="">
                     <i class="iconfont icon-weixin"></i>
                     <p>微信</p>
                  </a>
                  <a href="">
                     <i class="iconfont icon-QQ"></i>
                     <p>QQ</p>
                  </a>
                  <a href="">
                     <i class="iconfont icon-weibo"></i>
                     <p>微博</p>
                  </a>
               </div>
            </div>
         </nav>
      </div>
   </header>

   <!-- 内容区 -->
   <main class="main-content">
      <!--左边内容区-->
      <div class="content-left">
         <!-- 猜你喜欢 -->
         <div class="be-like">
            <div class="be-like-title">
               <h3 class="be-like-title-h3">猜你喜欢</h3>
               <span class="change-like">
                  <i class="iconfont icon-shuaxin"></i>
                  <span class="change-txt">换一批</span>
               </span>
            </div>
            <div class="be-like-content">
               <ul class="be-like-ul">
                  <li class="BL-c">
                     <div class="BL-img">
                        <img class="BL-img-vip" src="../img/vip.png" alt="">
                        <img class="BL-img-c"
                           src="https://imagev2.xmcdn.com/storages/5080-audiofreehighqps/55/76/GKwRIW4Gnpv0AAKVRAF6Ypw8.jpeg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"
                           alt="">
                        <span class="BL-play">
                           <i class="iconfont icon-erji"></i>
                           <p>512.8万</p>
                        </span>
                        <div class="play-icon">
                           <img class="play-icon-c" src="../img/play.png" alt="">
                        </div>
                     </div>
                     <p class="BL-info-p1">唐玄宗 | 读懂唐玄宗宗读懂唐玄宗宗</p>
                     <a class="BL-info-p2">北岸之声</a>
                  </li>
               </ul>
            </div>
         </div>
         <!-- 有声书 -->
         <div class="audio-book">
            <div class="be-like-title">
               <h3 class="be-like-title-h3">有声书</h3>
               <a class="tab-txt tab-active" id="toutuoyuan">头陀渊</a><a class="tab-txt" id="doupocangqiong">斗破苍穹</a><a
                  class="tab-txt" id="xinghancanlan">星汉灿烂</a><a class="tab-txt" id="santi">三体</a><a
                  class="change-txt">更多</a>
            </div>
            <div class="audio-book-content">
               <ul class="audio-book-ul">
                  <li class="BL-c">
                     <div class="BL-img">
                        <img class="BL-img-vip" src="../img/vip.png" alt="">
                        <img class="BL-img-c"
                           src="https://imagev2.xmcdn.com/storages/5080-audiofreehighqps/55/76/GKwRIW4Gnpv0AAKVRAF6Ypw8.jpeg!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290"
                           alt="">
                        <span class="BL-play">
                           <i class="iconfont icon-erji"></i>
                           <p>512.8万</p>
                        </span>
                        <img class="play-icon-c" src="../img/play.png" alt="">
                     </div>
                     <p class="BL-info-p1">唐玄宗 | 读懂唐玄宗宗读懂唐玄宗宗</p>
                     <a class="BL-info-p2">北岸之声</a>
                  </li>
               </ul>
            </div>
         </div>
      </div>

      <!--右边导航栏-->
      <div class="content-rigth">
         <!-- 登录 -->
         <div class="right-up-login">
            <div class="up-login-bac">
               <div class="up-login-img-box">
                  <img class="up-login-img" src="../img/userinfo.png" alt="">
               </div>
               <div class="up-login-txt">快速登录，开启嗨听体验</div>
            </div>
            <div class="up-login-button">
               <button class="up-login-btn">登录</button>
            </div>
         </div>
         <!-- 手机版二维码 -->
         <div class="right-middle-download">
            <div class="middle-download-txt">
               <div class="mdt-span">
                  <span class="mdt-span-one">下载</span>
                  <span class="mdt-span-two">手机APP</span>
               </div>

               <div class="mdt-p">随时随地，听书听课听播客</div>
            </div>
            <div class="middle-download-erweima">
               <img class="shouji-erweima" src="../img/erweima.png" alt="">
            </div>
         </div>
         <!-- 有声书排行榜 -->
         <div class="right-down-ranking">
            <div class="ranking-title">有声书新品榜</div>
            <div class="ranking-content">
               <ul class="ranking-ul">
                  <li class="RK-c">
                     <div class="RK-img">
                        <img class="RK-img-c" src="../img/ting.png" alt="">
                        <img class="play-RK-c" src="../img/play.png" alt="">
                     </div>
                     <div class="RK-info">
                        <p class="RK-info-p1">唐玄宗 | 读懂唐玄宗宗读懂唐玄宗宗</p>
                        <p class="RK-info-p2">北岸之声</p>
                     </div>
                  </li>
                  <li class="RK-d">
                     <div class="RK-d-rank">4</div>
                     <div class="RK-d-info">【白夜剧场】猎冰｜张颂文狂飙后首部电视剧｜大毒枭真实原型改编 | 艾宝良演播|缉毒犯罪</div>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </main>

   <!-- js -->
   <script>
      const guesslikeUrl = 'http://localhost:3001/api?tag=guesslike'
      const audioBookUrl = 'http://localhost:3001/api?tag=audiobook'
      const rankingBookUrl = 'http://localhost:3001/api?tag=ranking'
      const $ = (ele) => {
         return document.querySelector(ele)
      }
      const $$ = (ele) => {
         return document.querySelectorAll(ele)
      }
      const belikeul = $('.be-like-ul')
      const audiobookul = $('.audio-book-ul')
      const changelike = $('.change-like')
      const rankingul = $('.ranking-ul')
      const tabs = $$('.tab-txt')

      //有声书tab切换效果
      tabs.forEach(item => {
         item.addEventListener('click', function () {
            tabs.forEach(item => {
               item.classList.remove('tab-active')
            })
            this.classList.add('tab-active')
         })
      })

      //ajax封装
      function ajax(options) {
         const xhr = new XMLHttpRequest()
         xhr.open(options.type, options.url)
         xhr.send()
         xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
               options.success(JSON.parse(xhr.responseText))
            }
         }
      }

      //数据处理
      function bookData() {
         this.guessLikeBook = []
         this.guessLikeNew = []
         this.audioBook = {}
         this.audioBookNew = []
         this.rankingBook = []
         this.audiotab = ''
         this.elechild = ''
         this.timeStart = 0
         this.timeEnd = 1
         this.group = 0
         this.num = 5
         this.clickNum = 0
      }
      bookData.prototype = {
         constructor: bookData,
         formatnumber: function (n) {
            n = Number(n)
            if (n == 0 || (n > 0 && n < 10000)) {
               return n;
            } else if (n > 10000 && n < 100000000) {
               return (n / 10000).toFixed(1) + '万';
            } else {
               return (n / 100000000).toFixed(2) + '亿';
            }
         },
         listLen: function () {
            var len = this.guessLikeBook.length
            this.group = len / this.num
            if (len % this.num != 0) {
               this.group = parseInt(this.group) + 1
            }
         },
         autoIncre: function () {
            this.clickNum++
            this.timeStart++
            this.timeEnd++
         },
         clear: function () {
            if (this.clickNum > this.group - 1) {
               this.timeStart = 0;
               this.timeEnd = 1;
               this.clickNum = 0;
            }
         },

         //渲染猜你喜欢样式
         render: function () {
            this.elechild = ''
            this.guessLikeNew = this.guessLikeBook.slice(this.num * this.timeStart, this.num * this.timeEnd);
            this.guessLikeNew.forEach(item => {
               //item.vip == 1 ? vipurl = '../img/vip.png' : vipurl = ''
               this.elechild +=
                  `<li class="BL-c">
                  <div class="BL-img">
                     <img class="BL-img-vip" src="${item.vip == 1 ? '../img/vip.png' : ''}" onerror="this.style.display='none'" alt="">
                     <img class="BL-img-c" src="${item.img}" alt="">
                     <span class="BL-play">
                        <i class="iconfont icon-erji"></i>
                        <p>${this.formatnumber(item.times)}</p>
                     </span>
                     <div class="play-icon">
                        <img class="play-icon-c" src="../img/play.png" alt="">
                     </div>
                  </div>
                  <p class="BL-info-p1">${item.title}</p>
                  <a class="BL-info-p2">${item.author}</a>
               </li>`
            })
            return this.elechild
         },

         //渲染有声书样式
         renderaudio: function () {
            this.elechild = ''
            this.audioBookNew = this.audioBook[this.audiotab]
            this.audioBookNew.forEach(item => {
               this.elechild +=
                  `<li class="BL-c">
                  <div class="BL-img">
                     <img class="BL-img-c" src="${item.img}" alt="">
                     <div class="play-icon">
                        <img class="play-icon-c" src="../img/play.png" alt="">
                     </div>
                  </div>
                  <p class="BL-info-p1">${item.text}</p>
                  <a class="BL-info-p2">${item.author}</a>
               </li>`
            })
            return this.elechild
         },

         //渲染有声书排行榜样式
         renderranking: function () {
            this.elechild = ''
            this.rankingBook.forEach((item, index) => {
               var rank = ''
               if (index <= 2) {
                  if (index == 1) {
                     rank = 'second'
                  } else if (index == 2) {
                     rank = 'third'
                  } else {
                     rank = ''
                  }
                  this.elechild +=
                     `<li class="RK-c">
                     <div class="RK-img ${rank}">
                        <img class="RK-img-c" src="${item.img}" alt="">
                        <img class="play-RK-c" src="../img/play.png" alt="">
                     </div>
                     <div class="RK-info">
                        <p class="RK-info-p1">${item.desc}</p>
                        <p class="RK-info-p2">${item.author}</p>
                     </div>
                  </li>`
               } else {
                  this.elechild +=
                     `<li class="RK-d">
                     <div class="RK-d-rank">${index + 1}</div>
                     <div class="RK-d-info">${item.desc}</div>
                  </li>`
               }
            })
            return this.elechild
         }
      }

      const gld = new bookData()
      function belikedata(data) {
         data.forEach(item => {
            gld.guessLikeBook.push(item)
         })
         belikeul.innerHTML = gld.render()
         changelike.addEventListener('click', function () {
            gld.listLen()
            gld.autoIncre()
            gld.clear()
            belikeul.innerHTML = gld.render()
         })
      }
      function audiobookdata(data) {
         for (let i in data) {
            gld.audioBook[i] = data[i]
         }
         gld.audiotab = tabs[0].id
         audiobookul.innerHTML = gld.renderaudio()
         for (let i = 0; i < tabs.length; i++) {
            tabs[i].addEventListener('click', function () {
               gld.audiotab = tabs[i].id
               audiobookul.innerHTML = gld.renderaudio()
            })
         }
      }
      function rankingdata(data) {
         data.forEach(item => {
            gld.rankingBook.push(item)
         })
         rankingul.innerHTML = gld.renderranking()
      }

      function askdata(method, url, fun) {
         ajax({
            type: method,
            url: url,
            success: function (res) {
               fun(res.data)
            }
         })
      }
      document.addEventListener('DOMContentLoaded', function () {
         askdata('GET', guesslikeUrl, belikedata)
         askdata('GET', audioBookUrl, audiobookdata)
         askdata('GET', rankingBookUrl, rankingdata)
      })
   </script>
</body>

</html>